<template>
	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login" class="loginForm">
		<el-form-item prop="user" class="loginuseritem">
			<div style="width: 34%;">
				<img class="tximg" :alt="$CONFIG.APP_NAME" src="img/conputer.jpg">
			</div>
			<el-input class="userinput" v-model="form.user" prefix-icon="el-icon-user" clearable
					  :placeholder="$t('login.userPlaceholder')">

			</el-input>
		</el-form-item>
		<el-form-item prop="password" class="loginpassitem">
			<div style="width: 34%;"></div>
			<el-input class="pwdinput" v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
					  :placeholder="$t('login.PWPlaceholder')"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" style="width: 100%;" class="login_button" :loading="islogin" @click="login">{{
					buttonName
				}}
			</el-button>
		</el-form-item>

	</el-form>
</template>

<script>
import tool from "@/utils/tool";
import db from "@/utils/db";
import DEFAULT_CONFIG from "@/config";

export default {
	data() {
		return {
			buttonName:this.$t('login.signIn'),
			userType: 'admin',
			form: {
				// user: "admin",
				// password: "111111",
				user: null,
				password: null,
				autologin: false
			},
			rules: {
				user: [
					{required: true, message: this.$t('login.userError'), trigger: 'blur'}
				],
				password: [
					{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
				]
			},
			islogin: false,

		}
	},
	watch: {
		userType(val) {
			if (val == 'admin') {
				this.form.user = 'admin'
				this.form.password = 'admin'
			} else if (val == 'user') {
				this.form.user = 'user'
				this.form.password = 'user'
			}
		}
	},
	beforeCreate() {
		//进入登录页面，初始化一次数据库
		db.create();
    	//清除应用数据缓存
    this.$cache.data.clearAll();
		this.$cache.tree.clearAll();
		this.$cache.tree.autoInit();
		this.$cache.dic.initBigData();
	},
	mounted() {
		if(DEFAULT_CONFIG.ENV!=='production'){
			this.form.user='iforo';
			this.form.password='111111';
		}
	},
	methods: {
		async login() {
			let validate = await this.$refs.loginForm.validate().catch(() => {
			});
			if (!validate) {
				return false
			}
			this.islogin = true
			let data = {
				loginName: this.form.user,
				password: this.$TOOL.crypto.MD5(this.form.password),
			}

			let user = await this.$API.auth.login.post(data);
			if (!user.success) {
				this.islogin = false
				return false
			}else{
				this.buttonName = "登录成功，正在准备初始化数据……"
				//读取角色和角色对应的资源信息，组装成前端数据格式
				let valid = await this.$cache.login.assemble(user,false,this);
				if(!valid){
					this.buttonName = this.$t('login.signIn');
					this.islogin = false;
				}
				//初始化字典信息
				this.$cache.dic.init();

				let dashboardGrid = [];
				dashboardGrid.push("welcome");
				dashboardGrid.push("var");
				dashboardGrid.push("time");
				dashboardGrid.push("progress");
				dashboardGrid.push("echarts");
				dashboardGrid.push("about");
				this.$TOOL.data.set("DASHBOARDGRID", dashboardGrid);

				//进入首页
				this.$router.replace({
					path: '/'
				})

			}
		},

	}
}
</script>

<style>
.userinput {
	width: 66% !important;
	float: right;

}

.loginuseritem .el-form-item__error{
	left: 34%;
}


.pwdinput {
	width: 66% !important;
	float: right;
}
.loginpassitem .el-form-item__error{
	left: 34%;
}

.tximg {
	width: 32%;
	vertical-align: bottom;
	margin-right: 10px;
	position: absolute;
	margin-top: -20px;
	height: 240%;
}
.loginForm .el-form-item--large{
	margin-bottom: 18px;
}

.login_button{
	background-color: #066EC3!important;
	border-radius: 5px;

}

.login_button:hover{
	background-color: #066EC3 !important;
	border-radius: 5px;
	color: #fff !important;

}
</style>
